<template>
	<view>
		<u-popup :show="popup_show" mode="center" :safeAreaInsetBottom="false" :mask-close-able="false" round="15" :custom-style="{'margin-bottom':'50rpx'}">
			<view class="popup">
				<view class="popup-wrap">
					<!-- 提示 -->
					<text class="title">{{title || i18n_t('提示')}}</text>
					<text class="content">{{content}}</text>
					<view class="btns">
						<!-- 取消 -->
						<text class="btn-text center btn-text-cancel" @click="cancel">{{cancel_text || i18n_t('取消')}}</text>
						<!-- 确认 -->
						<text class="btn-text center btn-text-confirm" @click="confirm">{{confirm_text || i18n_t('确认')}}</text>
					</view>

				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				default: ""
			},
			content: {
				default: ""
			},
			cancel_text: {
				type: String,
				default: ""
			},
			confirm_text: {
				type: String,
				default: ""
			},
		},
		data() {
			return {
				popup_show: false,
				confirm_btn: ""
			};
		},

		methods: {
			show() {
				this.popup_show = true
			},
			confirm() {
				this.popup_show = false
				this.$emit('confirm')
			},
			cancel() {
				this.popup_show = false
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 600rpx;
	}

	.popup-wrap {
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border-radius: 20rpx;

		.title {
			margin: 0 auto;
			line-height: 120rpx;
			font-size: 34rpx;
			color: #333333;
			font-weight: bold;
		}

		.content {
			text-align: center;
			padding: 0rpx 30rpx;
			color: #333333;
			font-size: 30rpx;
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			padding: 30rpx;

			.btn-text {
				color: #524F42;
				font-size: 30rpx;
				height: 80rpx;
				width: 240rpx;
				line-height: 80rpx;
				border-radius: 10rpx;
			}

			.btn-text-cancel {
				color: #333333;
				background-color: #eeeeee;
			}

			.btn-text-confirm {
				color: #333333;
				background-color: #FCD436;

			}

		}
	}
</style>